<template>
  <div>
    <c-title :hide="false" :text="checkTitle()"></c-title>
    <diyBackGround></diyBackGround>
    <div class="contenBox">
      <div class="teamAgent" v-if="status == 2">
        <div class="teamAgentNavLi" @click="tapStatusNav(item.status, '3')" :class="teamStatus == item.status ? 'isTeam' : ''" v-for="item in teamAgentNav" :key="item.status">{{ item.title }}</div>
      </div>
      <div class="teamAgent" v-if="status == 3">
        <div class="teamAgentNavLi" @click="tapStatusNav(item.status, '2')" :class="areaStatus == item.status ? 'isTeam' : ''" v-for="item in areaNav" :key="item.status">{{ item.title }}</div>
      </div>
      <div class="statusNav" v-if="(status == 2 && teamStatus != 3) || (status == 3 && areaStatus != 2) || status == 1">
        <div class="statusNavLi" @click="tapStatusNav(item.status, '1')" :class="nowStatus == item.status ? 'isNow' : ''" v-for="item in navStatus" :key="item.status">{{ item.title }}</div>
      </div>
    </div>
    <div class="listBox">
      <labelCell :info="info" :nowStatus="nowStatus" :areaStatus="areaStatus" :teamStatus="teamStatus" :status="status"></labelCell>
    </div>
  </div>
</template>
<script>
import diyBackGround from "../../member/balance/componet/diyBackGround";
import labelCell from "./components/label";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      navStatus: [
        { title: "全部", status: "", url: "" },
        { title: "未结算", status: "0", url: "plugin.ecological-point.frontend.modules.tactful.controllers.records.index" },
        { title: "已结算", status: "1", url: "plugin.ecological-point.frontend.modules.tactful.controllers.records.index" },
        { title: "已失效", status: "-1", url: "plugin.ecological-point.frontend.modules.tactful.controllers.records.index" }
      ],
      teamAgentNav: [
        { title: "团队奖励", status: 1, url: "plugin.ecological-point.frontend.modules.team.controllers.reward.reward-list" },
        { title: "团队招商奖励", status: 2, url: "plugin.ecological-point.frontend.modules.team.controllers.reward.merchant-reward-list" },
        { title: "加权分红奖励", status: 3, url: "plugin.ecological-point.frontend.modules.team.controllers.reward.weight-reward-list" }
      ],
      areaNav: [
        { title: "区域奖励", status: 1, url: "plugin.ecological-point.frontend.modules.area.controllers.reward.reward-list" },
        { title: "加权分红奖励", status: 2, url: "plugin.ecological-point.frontend.modules.area.controllers.reward.weight-reward-list" }
      ],
      nowStatus: "",
      teamStatus: 1,
      areaStatus: 1,
      status: null,
      info: [],

      isLoadMore: true, //判断是否要加载更多的标识
      page: 1, //当前的页数
      total_page: 0 //总共有多少页
    };
  },
  activated() {
    window.scrollTo(0, 0);
    this.status = this.$route.params.status;
    this.nowStatus = "";
    this.teamStatus = 1;
    this.areaStatus = 1;
    this.getData();
  },
  methods: {
    getData() {
      let url = "";
      let json = {};
      json.page = this.page;
      if (this.status == 2) {
        json.status = this.nowStatus ? this.nowStatus : "";
        url = this.teamAgentNav[this.teamStatus - 1].url;
        if (this.teamStatus == 3) {
          json.status = "";
        }
      } else if (this.status == 3) {
        json.status = this.nowStatus ? this.nowStatus : "";
        url = this.areaNav[this.areaStatus - 1].url;
        if (this.areaStatus == 2) {
          json.status = "";
        }
      } else {
        url = "plugin.ecological-point.frontend.modules.tactful.controllers.records.index";
        if (this.nowStatus == "") {
          json.status = "0";
        } else if (this.nowStatus == "0") {
          json.status = "1";
        } else if (this.nowStatus == "1") {
          json.status = "2";
        } else if (this.nowStatus == "-1") {
          json.status = "-1";
        }
      }
      $http.post(url, json, "加载中").then(response => {
        if (response.result === 1) {
          this.isLoadMore = true;
          if (this.status == 1) {
            this.info = response.data.data;
            this.total_page = response.data.last_page;
          } else {
            this.info = response.data.list.data;
            this.total_page = response.data.list.last_page;
          }
          if (!this.total_page) {
            this.total_page = 0;
          }
        }
      });
    },
    //获取更多数据
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let url = "";
        let json = {};
        json.page = this.page;
        if (this.status == 2) {
          json.status = this.nowStatus;
          url = this.teamAgentNav[this.teamStatus - 1].url;
          if (this.teamStatus == 3) {
            json.status = "";
          }
        } else if (this.status == 3) {
          json.status = this.nowStatus;
          url = this.areaNav[this.areaStatus - 1].url;
          if (this.areaStatus == 2) {
            json.status = "";
          }
        } else {
          url = "plugin.ecological-point.frontend.modules.tactful.controllers.records.index";
          if (this.nowStatus == "") {
            json.status = "0";
          } else if (this.nowStatus == "0") {
            json.status = "1";
          } else if (this.nowStatus == "1") {
            json.status = "2";
          } else if (this.nowStatus == "-1") {
            json.status = "-1";
          }
        }
        $http.get(url, json, "加载中").then(
          response => {
            this.isLoadMore = true;

            if (response.result === 1) {
              var myData = "";
              if (this.status == 1) {
                myData = response.data.data;
              } else {
                myData = response.data.list.data;
              }
              this.info = this.info.concat(myData); //数组拼接
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
              return;
            }
          },
          function (response) {
            console.log(response);
            // error callback
          }
        );
      }
    },
    checkTitle() {
      if (this.$route.params.status == 1) {
        this.fun.setWXTitle("让利奖励");
        return "让利奖励";
      } else if (this.$route.params.status == 2) {
        this.fun.setWXTitle("经销商奖励");
        return "经销商奖励";
      } else if (this.$route.params.status == 3) {
        this.fun.setWXTitle("区域奖励");
        return "区域奖励";
      }
    },
    tapStatusNav(status, key) {
      if (key == "1") {
        this.nowStatus = status;
      } else if (key == "2") {
        this.areaStatus = status;
        this.nowStatus = "";
      } else if (key == "3") {
        this.teamStatus = status;
        this.nowStatus = "";
      }
      this.init();
      this.getData();
    },
    init() {
      this.info = [];
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
    }
  },
  components: { diyBackGround, labelCell }
};
</script>
<style lang="scss" scoped>
.listBox {
  margin: 0 0.63rem;
  margin-top: 0.75rem;
  background: #fff;
  border-radius: 0.63rem;
  overflow: hidden;
  box-sizing: border-box;
}

.contenBox {
  margin: 0 0.63rem;
  margin-top: -8.36rem;

  .teamAgent {
    border: 1px solid #fff;
    height: 2.03rem;
    border-radius: 0.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;

    .teamAgentNavLi {
      flex: 1;
      height: 100%;
      text-align: center;
      line-height: 2.03rem;
      font-size: 1rem;
      border-right: 1px solid #fff;
    }

    .teamAgentNavLi:last-child {
      border-right: 0;
    }

    .isTeam {
      background: #fff;
      border-radius: 0.25rem;
    }
  }

  .statusNav {
    padding: 0 0.91rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .statusNavLi {
      line-height: 1.25rem;
      font-size: 0.88rem;
      line-height: 1.25rem;
      padding: 0.31rem 1rem;
      box-sizing: border-box;
      border-radius: 0.94rem;
    }

    .statusNavLi:last-child {
      margin-right: 0;
    }

    .isNow {
      background: #fff;
    }
  }
}
</style>